<template>

    <el-dialog class="default" :title="proDetailsType" :visible.sync="status" :before-close="handleClose" width="70%">
        <el-table v-if="proDetailsType == '付款明细'" :data="tableData" stripe tooltip-effect="dark" border
            style="width: 100%; margin-top:20px;" :headerCellStyle="{
        'background': '#ff6a00',
        'textAlign': 'center',
        'color': 'white'
    }" :cellStyle="{ 'textAlign': 'center' ,'fontSize': '12px'}">
            <el-table-column label="采购单号" prop="procureId" min-width="120px">
            </el-table-column>
            <!-- <el-table-column prop="createdAt" label="创建日期" min-width="180px">
            </el-table-column> -->
            <el-table-column prop="paymentTime" label="付款日期" min-width="180px">
            </el-table-column>
            <el-table-column min-width="220px" prop="paymentAmount" label="付款金额" width="120">
            </el-table-column>
            <el-table-column min-width="100px" prop="procurePaymentId" label="付款ID">
            </el-table-column>
            <el-table-column label="截图" min-width="120px">
                <template slot-scope="scope">
                    <div>
                        <el-image v-for='(v, i) in scope.row.paymentVouchersList' :key="i"
                            style="width: 50px; height: 50px" ref="preview" :src="v"
                            :preview-src-list="scope.row.paymentVouchersList"></el-image>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-table stripe tooltip-effect="dark" border style="width: 100%; margin-top:20px;" :headerCellStyle="{
        'background': '#ff6a00',
        'textAlign': 'center',
        'color': 'white'
    }" :cellStyle="{ 'textAlign': 'center' ,'fontSize': '12px'}" v-if="proDetailsType == '入库明细'" :data="inCountData">
            <el-table-column label="材料编码" prop="materialId" min-width="120px">
            </el-table-column>
            <el-table-column label="材料名称" prop="materialName" min-width="180px">
            </el-table-column>
            <el-table-column prop="createdAt" label="入库日期" min-width="180px">
            </el-table-column>
            <el-table-column prop="count" label="入库数量" min-width="180px">
            </el-table-column>
            <el-table-column prop="color" label="颜色" min-width="180px">
            </el-table-column>
            <el-table-column prop="norm" label="规格" min-width="180px">
            </el-table-column>
            <el-table-column label="截图" min-width="120px">
                <template slot-scope="scope">
                    <div>
                        <el-image v-for='(v, i) in scope.row.inVouchersImageList' :key="i"
                            style="width: 50px; height: 50px" ref="preview" :src="v"
                            :preview-src-list="scope.row.inVouchersImageList"></el-image>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import dayjs from 'dayjs';
export default {
    props: {
        proDetailsStatus: {
            type: Boolean,
            default: false
        },
        proDetailsType: {
            type: String,
            default: ''
        },
        proDetailsId: {
            type: String,
            default: '0'
        }
    },
    watch: {
        proDetailsStatus: {
            handler(newVal) {
                this.status = newVal;
            },
            deep: true,
            immediate: true
        },
        proDetailsType: {
            handler(newVal) {
                if (newVal) {
                    if (this.proDetailsType == '付款明细') {
                        this.getPaymentDetails();
                    } else if (this.proDetailsType == '入库明细') {
                        this.getArrviedDetails();
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {

    },
    data() {
        return {
            tableData: [],
            status: true,
            inCountData: [],
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit('confirm')
                })
                .catch(_ => { });
        },

        getPaymentDetails() {
            let params = {
                procureId: this.proDetailsId
            }
            this.$api.procureProcurePaymentList(params).then(res => {
                res.map(el => {
                    if (el.paymentVouchers) {
                        el.paymentVouchers = el.paymentVouchers.split(',');
                        el.paymentVouchersList = [];
                        el.paymentVouchers.map(k => {
                            el.paymentVouchersList.push(this.$imgHost + k);
                        })
                    }
                })
                this.tableData = res
            })
        },
        getArrviedDetails() {
            let params = {
                procureId: this.proDetailsId
            }
            this.$api.procureProcureMaterials(params).then(res => {
                res.map(el => {
                    el.inVouchersImageList = [];
                    // el.createdAt = dayjs(el.createdAt).format("YYYY-MM-DD HH:mm:ss");
                    if (el.inVouchers) {
                        el.inVouchers = el.inVouchers.split(',');
                        el.inVouchers.map(k => {
                            el.inVouchersImageList.push(this.$imgHost + k)
                        })
                    }
                })
                this.inCountData = res;
            })

        }
    }
}
</script>
<style lang="less" scoped>
.default /deep/ .el-button {
    border-color: #ff6a00;
    background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
    color: white;
    border-color: #f59a59;
    background-color: #f59a59;
}

/deep/ .el-button:hover {
    color: black;
    border-color: #DCDFE6;
    background-color: white;
}

span /deep/ .el-button:nth-child(2) {
    border-color: #ff6a00;
    background-color: #ff6a00;
}

span /deep/ .el-button:nth-child(2):hover {
    color: white;
    border-color: #f59a59;
    background-color: #f59a59;
}

// .main /deep/ .el-select:hover{
//   border-color:#ff6a00 !important;
// }
//  /deep/ .el-input__inner{
//   border-color: #ff6a00 !important;
// } 
/deep/ .el-input__inner:hover {
    border-color: #ff6a00 !important;
}

/deep/ .el-input__inner:focus {
    border-color: #ff6a00 !important;
}

/deep/ .selected {
    color: #ff6a00 !important;
}

/deep/ .active {
    color: #ff6a00 !important;
}

/deep/ .hover {
    color: #ff6a00 !important;
}

/deep/ .selected {
    color: #ff6a00 !important;
}

/deep/ .el-loading-text {
    color: #ff6a00 !important;
}

/deep/ .el-icon-loading {
    color: #ff6a00 !important;
}
</style>